<template>
    <div class="navbar">
      <div class="container">
        <div class="pull-left">
          <img src="../assets/navbar/nav-left.png" alt="图片正在加载...">
        </div>
        <div class="pull-right">
          <el-button type="primary" round>免费注册</el-button>
          <el-button round>登录</el-button>
        </div>
        <div class="pull-nav">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">
              <a>
                <router-link to="/Home">首页</router-link>
              </a>
            </el-menu-item>
              <el-submenu index="2">
                <template slot="title">产品</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">服务</template>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
                <el-menu-item index="3-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item index="4">
                <a href="https://www.baidu.com" target="_blank">关于</a>
              </el-menu-item>
            </el-menu>
          </el-menu>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
</template>
<script>
export default {
  name: "Navbar"
};
</script>

<style>
.clearfix::after {
  content: ".";
  clear: both;
  display: block;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
.navbar {
  height: 72px;
  background: none repeat scroll 0 0 #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0;
  position: static;
}
.container {
  min-width: 1000px;
  max-width: 1200px;
  width: 1170px;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
  margin: 0 auto;
  padding: 0 15px;
  font-size: 0;
}
.container > .pull-left {
  float: left;
  border-right: 1px solid blue;
}
.container > .pull-left > img {
  width: 150px;
  height: 72px;
  vertical-align: middle;
}
.container > .pull-right {
  float: right;
  padding: 18px 0;
  border-left: 1px solid blue;
}
.container > .pull-right > button {
  width: 110px;
  height: 36px;
}
.container > .pull-nav {
  float: right;
  padding-right: 10px;
}
.el-menu--horizontal .el-menu-item {
  height: 72px;
  line-height: 72px;
  color: #5a5e66;
}
.el-menu--horizontal .el-submenu .el-submenu__title {
  height: 72px;
  line-height: 72px;
  color: #5a5e66;
}
.el-menu--horizontal .el-submenu > .el-menu {
  top: 75px;
}
.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: #409eff;
}
.el-menu--horizontal .el-menu-item:focus,
.el-menu--horizontal .el-menu-item:hover,
.el-menu--horizontal .el-submenu__title:hover {
  color: #409eff;
}
.el-submenu .el-menu-item {
    min-width: 88px;
}
</style>

